<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <el-menu-item index="1">Processing Center</el-menu-item>
          <el-sub-menu index="2">
            <template #title>Workspace</template>
            <el-menu-item index="2-1">item one</el-menu-item>
            <el-menu-item index="2-2">item two</el-menu-item>
            <el-menu-item index="2-3">item three</el-menu-item>
            <el-sub-menu index="2-4">
              <template #title>item four</template>
              <el-menu-item index="2-4-1">item one</el-menu-item>
              <el-menu-item index="2-4-2">item two</el-menu-item>
              <el-menu-item index="2-4-3">item three</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="3">Info</el-menu-item>
          <el-menu-item index="4">Orders</el-menu-item>
        </el-menu>
      </el-header>
      <!-- 头部 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false" v-if="isCollapse"
              ><el-icon> <Expand /></el-icon
            ></el-radio-button>
            <el-radio-button :label="true" v-else
              ><el-icon><Fold /></el-icon
            ></el-radio-button>
          </el-radio-group>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group>
                <template #title><span>Group One</span></template>
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title><span>item four</span></template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <template #title>Navigator Two</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon><document /></el-icon>
              <template #title>Navigator Three</template>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><setting /></el-icon>
              <template #title>Navigator Four</template>
            </el-menu-item>
          </el-menu></el-aside
        >
        <!-- 侧边栏 -->
        <el-container>
          <!-- 主体 -->
          <el-main>
            <el-form :model="form" label-width="120px">
              <el-form-item label="Activity name">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="Activity zone">
                <el-select
                  v-model="form.region"
                  placeholder="please select your zone"
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item label="Activity time">
                <el-col :span="11">
                  <el-date-picker
                    v-model="form.date1"
                    type="date"
                    placeholder="Pick a date"
                    style="width: 100%"
                  />
                </el-col>
                <el-col :span="2" class="text-center">
                  <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                  <el-time-picker
                    v-model="form.date2"
                    placeholder="Pick a time"
                    style="width: 100%"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="Instant delivery">
                <el-switch v-model="form.delivery" />
              </el-form-item>
              <el-form-item label="Activity type">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="Online activities" name="type" />
                  <el-checkbox label="Promotion activities" name="type" />
                  <el-checkbox label="Offline activities" name="type" />
                  <el-checkbox label="Simple brand exposure" name="type" />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="Resources">
                <el-radio-group v-model="form.resource">
                  <el-radio label="Sponsor" />
                  <el-radio label="Venue" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="Activity form">
                <el-input v-model="form.desc" type="textarea" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">Create</el-button>
                <el-button>Cancel</el-button>
              </el-form-item>
            </el-form>
          </el-main>
          <!-- 主体 -->
          <!-- 底部 -->
          <el-footer>
            <el-divider>
              <el-icon><star-filled /></el-icon> </el-divider
          ></el-footer>
          <!-- 底部 -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
const activeIndex = ref("1");
const activeIndex2 = ref("1");

import { ref, reactive } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Expand,
  Fold,
  StarFilled,
} from "@element-plus/icons-vue";

const isCollapse = ref(true); // true是收缩  false是展开

const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log(form);
};
</script>
